import styles from '../style/CountDown.module.scss'
import { useCountDown } from 'ahooks';
import classNames from 'classnames';

const CountDown = ({ matchTime, isLive, mobile }) => {
  const [, formattedRes] = useCountDown({ leftTime: matchTime * 1000 - new Date().getTime() });
  const { hours, minutes, seconds } = formattedRes

  if (!isLive) return <></> //非直播
  if (matchTime * 1000 <= new Date().getTime()) return <></>
  return (
    <section className={classNames(styles.CountDown, mobile ? styles.h5mode : null)}>
      <p>距离比赛时间</p>
      <div>
        <span>{hours > 10 ? hours : ('0' + hours)}</span>
        <i>时</i>
        <span>{minutes >= 10 ? minutes : ("0" + minutes)}</span>
        <i>分</i>
        <span>{seconds >= 10 ? seconds : ("0" + seconds)}</span>
      </div>
    </section>
  )
}


export default CountDown